<template>
	<div class="item-box" :class="type">
	  <div class="price">
	  	<span class="num">{{ content.price }}</span>
	  	<span class="unit">{{$t('message.unit')}}</span>
	  </div>
	  <ul class="tip">
	    <li>{{ content.detail }}</li>
	    <li>{{$t('message.avaiableTimeTo')}}{{ content.time }}</li>
	  </ul>
	</div>
</template>
<script>
  export default {
    name: 'PersonalDiscountItem',
    data () {
      return {}
    },
    props: {
      type: {
        type: String,
        default: 'not-use'
      },
      content: {
        type: Object,
        default: {}
      }
    }
  }
</script>
<style scoped>
.item-box {
  width: 312px;
  height: 218px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  box-shadow: 0 6px 10px 0 rgba(217, 217, 217, 0.3);
  padding: 0 23px;
}

.not-use {
	background: url('../../../assets/images/personal/discount/not_use.png') no-repeat;
}

.used {
  background: url('../../../assets/images/personal/discount/used.png') no-repeat;
}

.expire {
  background: url('../../../assets/images/personal/discount/expire.png') no-repeat;
}

.item-box .price {
	height: 65px;
  font-size: 14px;
  margin-top: 50px;
}

.item-box .price .num {
	line-height: 65px;
	font-size: 46px;
}

.item-box .price .unit {
	line-height: 20px;
  margin-left: 8px;
}

.tip {
  font-size: 14px;
  margin-top: 33px;
}

.tip > li {
	padding-left: 16px;
  margin-bottom: 8px;
  position: relative;
}

.tip > li:before {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #a5a5a5;
	position: absolute;
	top: 7px;
	left: 0;
}

.not-use .price {
	color: #ff600a;
}

.not-use .tip {
	color: #a5a5a5;
}

.used .price, .used .tip, .expire .price, .expire .tip {
	color: #d7d7d7;
}

.used .tip li:before, .expire .tip li:before {
	background-color: #d7d7d7;
}
</style>